<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'

import { useUpload } from '@/components/UploadFile/src/useUpload'
import { UploadRequestOptions } from 'element-plus/es/components/upload/src/upload'

defineOptions({ name: 'MdEditor' })

const props = defineProps({
  height: propTypes.oneOfType([Number, String]).def('500px'),
  readonly: propTypes.bool.def(false),
  modelValue: propTypes.string.def('')
})

const emit = defineEmits(['update:modelValue'])

const valueHtml = ref(props.modelValue)

watch(
  () => props.modelValue,
  (val: string) => {
    if (val === unref(valueHtml)) return
    valueHtml.value = val
  },
  {
    immediate: true
  }
)

// 监听
watch(
  () => valueHtml.value,
  (val: string) => {
    emit('update:modelValue', val)
  }
)
const mavonEditorRef = ref()
const imgAdd = (pos: any, $file: any) => {
  // const formData = new FormData();
  // formData.append("file",$file);
  const formData = {} as UploadRequestOptions
  formData.file = $file
  useUpload()
    .httpRequest(formData)
    .then((data: any) => {
      mavonEditorRef.value.$img2Url(pos, data.data)
    })
}
</script>

<template>
  <mavon-editor ref="mavonEditorRef" v-model="valueHtml" @img-add="imgAdd" :ishljs="true" />
</template>

<style src="mavon-editor/dist/css/index.css"></style>
<style scoped>
.v-note-help-wrapper {
  z-index: 5000 !important;
}
.markdown-body {
  width: 100%;
}
</style>
